<template>
  <div>
    <div class="warnningTip">
      <i class="el-icon-warning-outline" />{{ translate("syfygn")
      }}<strong>{{ translate("taskConfig") }}</strong>
    </div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="handleQuery"
      @clear="clear"
    />
    <div class="doumee_table_header">
      <el-button
        v-if="meta.indexOf('sPShareOrder') > -1"
        v-preventReClick
        type="primary"
        @click="selectBack()"
      >{{ translate("plfycl") }}</el-button>
      <el-button
        v-if="meta.indexOf('shareOrderListExport') > -1"
        :loading="exportLoading"
        @click="selectExport"
      >{{ translate("export") }}</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        :selectable="(row) => row.status === '0'"
        fixed="left"
        align="center"
        type="selection"
        width="55"
      />
      <el-table-column
        align="center"
        :label="translate('orderId')"
        width="210"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span class="primaryColor pointer" @click="orderDetail(scope.row)">{{
            scope.row.orderId
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('orderType')"
        prop="shareTypeName"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('ssrw')"
        prop="shareName"
        min-width="140"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('dfkfje')"
        prop="invoiceMoney"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('yjblUnit')"
        prop="ratio"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('yjfy')"
        prop="taskMoney"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('skfy')"
        prop="realMoney"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('fyyhxx')"
        prop="shareMemberInfo"
        min-width="210"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('xdhyxx')"
        prop="memberInfo"
        min-width="210"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('orderTime')"
        prop="orderTime"
        min-width="210"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('orderStatus')"
        prop="statusName"
        min-width="80"
      />
      <el-table-column
        align="center"
        :label="translate('bz')"
        prop="remarks"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        fixed="right"
        :label="translate('fyzt')"
        min-width="80"
      >
        <template v-slot="scope">
          <span v-if="scope.row.status === '0'">{{ translate("dqr") }}</span>
          <span v-if="scope.row.status === '1'">{{
            translate("loseEfficacy")
          }}</span>
          <span v-if="scope.row.status === '2'">{{ translate("yff") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        fixed="right"
        :label="translate('handle')"
        min-width="120"
      >
        <template v-slot="scope">
          <div class="flex-cc">
            <el-button
              v-if="
                scope.row.status === '0' && meta.indexOf('sPShareOrder') > -1
              "
              v-preventReClick
              type="text"
              @click="selectBack(scope.row)"
            >{{ translate("fycl") }}</el-button>
            <span v-else class="primaryColor">-</span>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="currentPageChange"
      @SizeChange="pageSizeChange"
    />
    <el-dialog
      :close-on-click-modal="modalDialog"
      :lose-on-press-escape="modalDialog"
      :title="translate('plfycl')"
      :visible.sync="isopenModal"
      width="800px"
    >
      <div>
        <div v-if="selectOrderItem.orderId" class="mb20">
          {{ translate("nzzclfy") }}{{ selectOrderItem.orderId }}
        </div>
        <div v-else class="mb20">
          {{ translate("nzzjxplfy") }}
        </div>
        <div class="doumee-filter">
          <el-form
            ref="modal"
            label-suffix="："
            :model="rebateForm"
            label-width="auto"
          >
            <el-form-item :label="translate('cljg')">
              <el-radio v-model="rebateForm.status" label="1">{{
                translate("tyfy")
              }}</el-radio>
              <el-radio v-model="rebateForm.status" label="0">{{
                translate("jjfy")
              }}</el-radio>
            </el-form-item>
            <el-form-item
              v-if="isShowMoney"
              :label="translate('fyje')"
              :rules="[
                { required: true, message: translate('fyjePlace'), trigger: 'blur' },
              ]"
            >
              <el-input
                v-model="rebateForm.money"
                class="w400"
                :placeholder="translate('fyjePlace')"
              />
            </el-form-item>
            <el-form-item :label="translate('bz')">
              <el-input
                v-model="rebateForm.remarks"
                class="w400"
                type="textarea"
                :placeholder="translate('bzxxPlace')"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isopenModal = false">{{
          translate("cancel")
        }}</el-button>
        <el-button type="primary" @click="shareOrderSub">{{
          translate("qd")
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { orderStatusConfig, ShareOrderList, ShareConsumeTypes, sPShareOrder, ShareOrderExport } from '@/api'
import Paginations from '@/components/paginations'
import { queryFormConfig } from './config'
export default {
  components: {
    Paginations
  },
  props: {
    meta: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      queryFormConfig,
      modalDialog: this.$store.state.app.dialog,
      isopenModal: false,
      isShowMoney: false,
      filters: {},
      rebateForm: {
        status: '1'
      },
      pagination: {
        page: 1,
        rows: 10
      },
      subLoading: false,
      list: [],
      totalCount: 0,
      listLoading: false,
      exportLoading: false,
      selectOrderList: [],
      selectOrderItem: {},
      orderTypeList: []

    }
  },
  created() {
    this.getShareConsumeTypes()
    this.getShareOrderList()
    this.getOrderType()
  },
  methods: {
    getOrderType() {
      orderStatusConfig({ param: {}}).then(res => {
        this.queryFormConfig.formItems[3].options = res.recordList || []
      })
    },
    handleQuery() {
      this.pagination.page = 1
      this.getShareOrderList()
    },
    getShareOrderList() {
      const { filters, pagination } = this
      if (filters.time && filters.time.length > 0) {
        filters.beginTime = filters.time[0]
        filters.endTime = filters.time[1]
      } else {
        filters.beginTime = ''
        filters.endTime = ''
      }
      this.listLoading = true
      ShareOrderList({ param: filters, pagination }).then(res => {
        this.listLoading = false
        if (res.errorCode !== '000000') return
        this.list = res.recordList
        this.totalCount = res.totalCount
      }, () => {
        this.listLoading = false
      })
    },
    shareOrderSub() {
      const param = { ...this.rebateForm }
      if (this.selectOrderItem.orderId) {
        param.ids = [this.selectOrderItem.orderId]
      } else {
        param.ids = this.selectOrderList.map(i => i.orderId)
      }

      this.$refs['modal'].validate((valid) => {
        if (valid) {
          this.subLoading = true
          sPShareOrder({ param }).then(res => {
            this.subLoading = false
            if (res.errorCode !== '000000') return
            this.$message.success(this.translate('chuliScs'))
            this.isopenModal = false
            this.handleQuery()
          }, () => {
            this.subLoading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getShareConsumeTypes() {
      ShareConsumeTypes({ param: {}}).then(res => {
        this.orderTypeList = res.recordList
      })
    },
    handleSelectionChange(val) {
      this.selectOrderList = val
    },
    orderDetail(item) {
      if (this.meta.indexOf('getShareOrderDetial') === -1) {
        return
      }
      this.$router.push({ name: 'ShareOrderDetail', query: { id: item.id }})
    },
    clear() {
      this.filters = {}
      this.handleQuery()
    },
    selectBack(item) {
      if (item || this.selectOrderList.length === 1) {
        this.selectOrderItem = item || this.selectOrderList[0]
        this.isShowMoney = true
      } else {
        this.selectOrderItem = {}
        this.isShowMoney = false
      }
      if (!item && this.selectOrderList.length === 0) {
        return this.$message.warning(this.translate('qxxzzplcl'))
      }
      this.rebateForm = {
        status: '1',
        money: this.selectOrderItem.taskMoney || ''
      }
      this.isopenModal = true
    },
    selectExport() {
      const { filters } = this
      if (filters.time && filters.time.length > 0) {
        filters.beginTime = filters.time[0]
        filters.endTime = filters.time[1]
      } else {
        filters.beginTime = ''
        filters.endTime = ''
      }
      this.exportLoading = true
      ShareOrderExport({ param: filters }).then(res => {
        this.exportLoading = false
        if (res.errorCode === '000000') {
          window.open(res.record.showUrl, '_blank')
        }
      }, () => {
        this.exportLoading = false
      })
    },
    currentPageChange(val) {
      this.pagination.page = val
      this.getShareOrderList()
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.getShareOrderList()
    }
  }
}
</script>

<style>
</style>
